<template>
  <div class="wrapper">
    <div class="search-wrapper">
      <el-input
        size="medium"
        prefix-icon="el-icon-search"
        v-model="search"
        @input="inputChange"
        :placeholder="
          item.placeholder === undefined ? '请输入' : item.placeholder
        "
      >
      </el-input>
    </div>
    <el-table
      size="small"
      ref="dataTable"
      border
      tooltip-effect="dark"
      style="width: 100%"
      :highlight-current-row="!item.multiple"
      @selection-change="handleSelectionChange"
      @current-change="handleSingleChange"
      :data="item.tableData"
    >
      <el-table-column type="selection" width="45" v-if="item.multiple">
      </el-table-column>
      <el-table-column :label="item.title">
        <template slot-scope="scope"
          >{{ scope.row.code }}-{{ scope.row.name }}</template
        >
      </el-table-column>
    </el-table>
    <el-row class="page-wrapper" :span="24" type="flex" justify="end">
      <el-pagination
        small
        @current-change="handleCurrentChange"
        :current-page.sync="table.curPage"
        :page-size="table.pageSize"
        :layout="item.paginationLayout||layout"
        :total="item.totalElements"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import _ from "lodash";
export default {
  name: "tableListCom",
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      search: "",
      //选中的数据
      multipleSelection: [],
      currentRow: null,
      table: {
        //当前页
        curPage: 1,
        //每页数据数
        pageSize: 10
      },
      layout: "total, prev, pager, next, jumper"
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.formData[this.item.prop] = val;
    },
    handleSingleChange(val) {
      this.currentRow = val;
      this.formData[this.item.prop] = val;
    },
    // handleSizeChange(val) {
    //   this.$emit("search", {
    //     pageSize: val,
    //     curPage: 1
    //   });
    //   this.table.pageSize = val;
    // },
    handleCurrentChange(val) {
      this.table.curPage = val;
      this.item.query({ curPage: val });
    },
    change() {
      this.search = _.trimStart(this.search);
      this.item.search({ searchParam: this.search });
    },
    inputChange: _.debounce(function() {
      this.change();
    }, 500)
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-table__body-wrapper {
  margin-top: 56px !important;
}
::v-deep .el-input__inner {
  border-radius: 20px;
}
::v-deep .el-table .cell {
  font-size: 14px;
}
.wrapper {
  width: 98%;
  margin-top: -30px;
  .search-wrapper {
    position: relative;
    z-index: 99;
    top: 90px;
    width: 90%;
    padding-left: 10px;
  }
  .page-wrapper {
    margin-top: 10px;
  }
}
</style>
